
// 渲染列表
function render() {
  axios({
    method: 'GET',
    url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
    // 自定义请求头
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    console.log(res);
    // 判断请求成功
    if (res.status === 0) {

      res.data.forEach(obj => {
        const theOpt = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`
        $('select[name=cate_id]').append(theOpt)
      })
      // 等循环结束之后,再执行form.render() 手动的去刷新了一下当前的select框的数据, 因为option标签是动态插入的
      form.render('select', 'edit')
    }
  })
}
render()


let imgUrl = ''

// 上传图片
$('.select').on('click', function () {
  // 触发input  #file 的点击事件
  $('#file').click()
})

$('#file').on('change', function (e) {
  const files = e.target.files

  if (files.length === 0) return

  const blobUrl = window.URL.createObjectURL(files[0])
  // 将生成的blob 替换页面中img的src 
  $('#image').prop('src', blobUrl)

  // 将当前的file文件赋值给 imgUrl 
  imgUrl = files[0]

})



/*
 发布新文章
 /my/article/add
 POST 
 数据类型 FormData 
 参数:  
  title	是	string	文章标题
  cate_id	是	int	所属分类 Id
  content	是	string	文章内容
  cover_img	是	blob二进制	文章封面
  state	是	string	状态，可选值为：已发布、草稿
*/


$('form').on('submit', function (e) {
  e.preventDefault()
  // const fd = new FormData(参数)
  // 参数为:一个form表单的dom对象  
  const htmlStr = tinyMCE.activeEditor.getContent();

  const fd = new FormData($('form')[0])

  // fd.append('content', htmlStr) 当前fd对象里没有这个属性,通过append追加

  fd.set('content', htmlStr) // 修改fd对象里面的某个属性,通过set去重新设置

  fd.append('cover_img', imgUrl)

  // fd.forEach((value, key) => {
  //   console.log('value --- key', value, key);
  // })
  // console.log(fd);
  axios({
    method: 'POST',
    url: 'http://api-breakingnews-web.itheima.net/my/article/add',
    // 自定义请求头
    headers: {
      Authorization: localStorage.getItem('token')
    },
    data: fd
  }).then(({ data: res }) => {
    console.log(res);
    layer.msg(res.message)
    // 判断请求成功
    if (res.status === 0) {
      setTimeout(() => {
      // 触发大网页 a标签的主动触发事件
      window.parent.$('#wzlist a').click()
      // 跳转到文章列表页面
      location.href = './../list/list.html'
      }, 600);
    }
  })
})



// 初始化富文本编辑器插件
initEditor()


const form = layui.form;
form.verify({
  articleTitle: [
    /^[\u4E00-\u9FA5a-zA-Z0-9_-]+$/,
    "标题只能是中英文, 数字下划线中划线组成"
  ],
  // 分类判断
  cate: function () {
    return $("select[name=cate_id]").val().length == 0 && "请选择文章类别"
  }
})